

<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router>
        <div id="top" v-show="!isCollapse">
          <img src="@/assets/logo.png"> 
          <b>后台管理系统</b> 
        </div>
        <el-menu-item v-for="item in noChildren" :key="item.name" :index="item.path">
            <i :class="item.icon" style="margin-left: 15px;"></i>
            <span slot="title" style="margin-left: 10px;">{{item.label}}</span>
         </el-menu-item>

        <el-submenu v-for="item in hasChildren" :key="item.label" :index="item.label">
            <template slot="title">
                <i :class="item.icon" style="margin-left: 15px;"></i>
                <span slot="title" style="margin-left: 10px;">{{item.label}}</span>
            </template>

            <el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
                <el-menu-item :index="subItem.path">{{ subItem.label }}</el-menu-item>
            </el-menu-item-group>

        </el-submenu>

    </el-menu>
</template>

<script>
import {mapState } from 'vuex'
export default {
    data() {
      return {
        meunDate: [
            {
                path:'/home',
                name:'home',
                label:'首页',
                icon:'iconfont icon-shouye',
                url:'/home'
            },
            {
                path:'/user',
                name:'user',
                label:'用户管理',
                icon:'iconfont icon-ziyuanxhdpi',
                url:'user'
            },
            {
                path:'/singer',
                name:'singer',
                label:'歌手管理',
                icon:'iconfont icon-geshou',
                url:'/singer'
            },
            {
                path:'/songlist',
                name:'songlist',
                label:'歌单管理',
                icon:'iconfont icon-yinlegedanyinfu',
                url:'/songlist'
            },
            {
                path:'/articleManage',
                name:'articleManage',
                label:'文章管理',
                icon:'iconfont icon-svgwrite',
                url:'/articleManage'
            },
            {
              path:'/tags',
              name:'tags',
              label:'标签管理',
              icon:'iconfont icon-biaoqian',
              url:'/tags',
            },
            {
              path:'/banner',
              name:'banner',
              label:'轮播图管理',
              icon:'iconfont icon-lunbotu',
              url:'/banner',
            },
            {
                label:'其他',
                icon:"iconfont icon-qita",
                // children:[
                //     {
                //         path:'#',
                //         name:'page',
                //         label:'页面1',
                //         icon:'iconfont icon-mima',
                //         url:'#'
                //     },
                //     {
                //         path:'#',
                //         name:'page2',
                //         label:'页面2',
                //         icon:'iconfont icon-mima',
                //         url:'#'
                //     }
                // ]
            }
        ]
      }
    },
    created(){
        console.log(this.meunDate.filter(item=> !item.children))
        console.log("-------------------")
        console.log(this.meunDate.filter(item => item.children))
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    computed: {
      ...mapState('tab',['isCollapse']),
        noChildren(){
            return this.meunDate.filter( item => !item.children)
        },
        hasChildren(){
            return this.meunDate.filter(item => item.children)
        }
    }
}
</script>

<style lang="less" scoped>
html , body{
  margin: 0;
  padding: 0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu{
    height: 100vh;
  }
  #top{
    position: relative;
    height: 60px; 
    width: 100%;
    img{
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      margin-left: 30px;
      width: 20px;
      border-radius: 50%;
      position: absolute;
    }
    b{
      position: absolute;
      line-height: 60px;
      left: 50%;
      transform: translateX(-40%);
      color: white;
    }
  }
</style>